.large-screen-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: rgb(29, 29, 29);
  color: #fff;
  font-size: 18px;

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(246, 110, 44, 0.64) 0%, rgba(246, 110, 44, 0.48) 100%);
    border-radius: 6px;

    // &:hover {
    //   background-color: #a6a6a6;
    //   background-color: rgba(0, 0, 0, 0.35);
    // }
  }

  .container-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    z-index: 1;
    transform: translate(-50%, -50%);

    .carorg-map-container {
      //地图
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      .carorg-amap-zh-mask {
        cursor: pointer;
        background-color: rgba(150, 84, 23, 0.12);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

    .wrapper-left-scale {
      position: absolute;
      // top: 104px;
      width: 446px;
      height: 960px;
      z-index: 2;
      transform-origin: 0 0;
    }

    .wrapper-center-section1 {
      position: absolute;
      // top: 104px;
      // left: 502px;
      // right: 502px;
      width: 964px;
      height: 193px;
      // border: 1px solid;
      // border: white solid 1px;
      z-index: 2;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.32) 100%),
        linear-gradient(180deg, rgba(246, 110, 44, 0.04) 0%, rgba(0, 0, 0, 0) 100%);
      box-shadow: 0px 2px 16px 0px rgba(246, 110, 44, 0.16);
      border-radius: 2px;
      border: 1px solid;
      // border-image: linear-gradient(180deg, rgba(255, 80, 1, 0), rgba(255, 80, 1, 0.24)) 1 1;
      border-image: linear-gradient(180deg, rgba(246, 110, 44, 0.12), rgba(246, 110, 44, 0.48)) 1 1;
      border-top: none;
      transform-origin: 0 0;
    }

    .wrapper-center-section1::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      -moz-backdrop-filter: blur(24px);
      -o-backdrop-filter: blur(24px);
      transform-origin: 0 0;
    }

    //车辆类型选择
    .wrapper-center-section2-scale {
      position: absolute;
      height: 42px;
      z-index: 2;
      padding: 0 16px;
      transform-origin: 100% 0;
      background: linear-gradient(180deg, rgba(246, 110, 44, 0.09) 0%, rgba(246, 110, 44, 0) 100%), rgba(0, 0, 0, 0.16);
      box-shadow: 0px 2px 16px 0px rgba(246, 110, 44, 0.08);
      border-radius: 21px;
      // border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(246, 110, 44, 0.4),
          rgba(246, 110, 44, 0.1),
          rgba(246, 110, 44, 0),
          rgba(246, 110, 44, 0.1),
          rgba(246, 110, 44, 0.4)
        )
        1 1;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      -moz-backdrop-filter: blur(8px);
      -o-backdrop-filter: blur(8px);
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      column-gap: 16px;
      align-items: center;
      .select-car {
        height: 42px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        column-gap: 4px;

        .select-img {
          flex: 0 0 27px;
          width: 20px;
          height: 20px;
          overflow: hidden;
        }

        .select-text {
          text-align: left;
          cursor: pointer;
          font-family: AlibabaPuHuiTi_2_85_Bold;
          font-size: 16px;
          color: #ffffff;
          white-space: nowrap;
          .count {
            color: #f66e2c;
            margin: 0 4px;
          }
        }

        .select-dropdown-icon {
          cursor: pointer;
          font-size: 14px;
          color: #cccccc;
          margin-right: 4px;
        }
      }

      .car-divider {
        width: 1px;
        height: 22px;
        background: linear-gradient(
          rgba(249, 249, 249, 0) 0%,
          rgba(255, 255, 255, 0.27) 50%,
          rgba(240, 240, 240, 0) 100%
        );
      }

      .car-cluster-choice {
        color: rgba(0, 0, 0, 0.88);
        font-weight: normal;
        font-size: 14px;
        line-height: 1.5714285714285714;
        cursor: pointer;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        column-gap: 6px;
        .choice-checkbox {
          position: relative;
          flex: 0 0 14px;
          width: 14px;
          height: 14px;
          border: 1px solid rgba(255, 255, 255, 0.64);
          border-radius: 2px;
          transition: all 0.3s;
          border-collapse: separate;
          &::after {
            position: absolute;
            top: 45%;
            left: 21%;
            display: table;
            width: 5.71428571px;
            height: 9.14285714px;
            border: 2px solid transparent;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg) scale(0) translate(-50%, -50%);
            opacity: 0;
            transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
            content: " ";
          }
          &.checked {
            background: linear-gradient(180deg, rgba(246, 110, 44, 0.9) 0%, rgba(246, 110, 44, 0.24) 100%);
            border: 1px solid rgba(246, 110, 44, 0.48);
            &::after {
              position: absolute;
              display: table;
              border: 2px solid #fff;
              border-top: 0;
              border-left: 0;
              transform: rotate(45deg) scale(1) translate(-50%, -50%);
              opacity: 1;
              transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
              content: " ";
            }
          }
          &.disabled {
            cursor: not-allowed;
            background-color: transparent !important;
            border-color: #f66e2c !important;
            &::after {
              border-color: #f66e2c !important;
            }
          }
        }
        .choice-title {
          font-size: 16px;
          color: #ffffff;
        }
      }
    }

    //车辆类型选择Popover
    .bigscreen-car-popover {
      .ant-popover-inner {
        background: linear-gradient(180deg, rgba(246, 110, 44, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
        border-radius: 2px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(255, 80, 1, 0), rgba(255, 80, 1, 0.24)) 1 1;
        backdrop-filter: blur(24px);
        box-shadow: none;
        .ant-popover-inner-content {
          padding: 0;
          color: #ffffff;
          .pop-list {
            max-height: 290px;
            overflow-y: auto;
          }
          .pop-list-item {
            clear: both;
            margin: 0;
            padding: 5px 12px;
            color: rgba(0, 0, 0, 0.88);
            font-weight: normal;
            font-size: 14px;
            line-height: 1.5714285714285714;
            cursor: pointer;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            column-gap: 4px;
            &.item-all {
              position: relative;
              &::after {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 1px;
                background: linear-gradient(
                  270deg,
                  rgba(246, 110, 44, 0) 0%,
                  rgba(246, 110, 44, 0.27) 50%,
                  rgba(246, 110, 44, 0) 100%
                );
                content: " ";
              }
            }
            .item-checkbox {
              position: relative;
              flex: 0 0 14px;
              width: 14px;
              height: 14px;
              border: 1px solid rgba(255, 255, 255, 0.64);
              border-radius: 2px;
              transition: all 0.3s;
              border-collapse: separate;
              &::after {
                position: absolute;
                top: 45%;
                left: 21%;
                display: table;
                width: 5.71428571px;
                height: 9.14285714px;
                border: 2px solid transparent;
                border-top: 0;
                border-left: 0;
                transform: rotate(45deg) scale(0) translate(-50%, -50%);
                opacity: 0;
                transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
                content: " ";
              }
              &.checked {
                background: linear-gradient(180deg, rgba(246, 110, 44, 0.9) 0%, rgba(246, 110, 44, 0.24) 100%);
                border: 1px solid rgba(246, 110, 44, 0.48);
                &::after {
                  position: absolute;
                  display: table;
                  border: 2px solid #fff;
                  border-top: 0;
                  border-left: 0;
                  transform: rotate(45deg) scale(1) translate(-50%, -50%);
                  opacity: 1;
                  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
                  content: " ";
                }
              }
            }
            .item-title {
              font-size: 14px;
              color: #ffffff;
            }

            &:hover {
              background: linear-gradient(
                270deg,
                rgba(254, 96, 51, 0) 0%,
                rgba(254, 96, 51, 0.14) 83%,
                rgba(254, 96, 51, 0) 100%
              );
              border-image: linear-gradient(270deg, rgba(254, 96, 51, 0), rgba(254, 96, 51, 0.72), rgba(254, 96, 51, 0))
                1 1;
            }
          }
        }
      }
    }

    // 新增数据分析
    .wrapper-center-section3-scale {
      position: absolute;
      // left: 502px;
      width: 964px;
      // right: 502px;
      height: 201px;
      // bottom: 32px;
      z-index: 2;
      transform-origin: 0 100%;

      .wrapper-center-section3 {
        // position: absolute;
        // left: 502px;
        // right: 502px;
        // height: 241px;
        // bottom: 32px;
        // z-index: 2;

        .section3-legend {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          margin-left: 24px;

          span:nth-of-type(3) {
            margin-left: 16px;
          }

          span:nth-of-type(4) {
            margin-right: 16px;
          }

          .legend-color {
            flex: 0 0 8px;
            width: 8px;
            height: 8px;
            border-radius: 2px;
          }

          .legend-text {
            margin-left: 4px;
            font-size: 12px;
            color: #ffffff;
          }
        }
      }
    }

    .wrapper-right-scale {
      position: absolute;
      // top: 104px;
      // right: 32px;
      // bottom: 32px;
      width: 446px;
      height: 960px;
      z-index: 2;
      transform-origin: 100% 0;

      .wrapper-right {
        width: 100%;
        height: 100%;
        // border: white solid 1px;
      }
    }
  }
}
